<!--
el-tree
@mc-node-click="节点点击 为啥不能直接用node-click 因为element会父子组件同时执行2次 参数 {value:id,node:node,data:data}"
-->
<template>
  <div class="mc-tree">
    <el-tree v-if="!mcPopTree"   ref="treeRef" :data="dataList" :node-key="nodeKey" v-bind="$attrs" v-on="$listeners"
             @node-click="clickNode" @current-change="change" :expand-on-click-node="expandOnClickNode">
      <!--模板自定义节点内容-->
      <template v-slot="scope"><slot name="content" :row="scope" :vue="vueIns"></slot></template>
    </el-tree>
    <el-popover v-else placement="bottom-start"  trigger="click">
      <el-tree  ref="treeRef" :data="dataList" :node-key="nodeKey" v-bind="$attrs" v-on="$listeners"
               @node-click="clickNode" @current-change="change" :expand-on-click-node="expandOnClickNode">
        <!--模板自定义节点内容-->
        <template v-slot="scope"><slot name="content" :row="scope" :vue="vueIns"></slot></template>
      </el-tree>
      <span slot="reference"><slot name="pop-view" :row="chooseNode" :vue="vueIns"></slot></span>
    </el-popover>
  </div>
</template>

<script>
  import McCommon from "./McCommon"
  export default {
    name: 'mc-tree',
    data () {
      return {
        //必须提前绑定 不能放mounted里去更改 根tree时机有关
        nodeKey:(this.mcConfig && this.mcConfig.nodeKey) ? this.mcConfig.nodeKey:"id",
        mcNodeParentKey:(this.mcConfig&&this.mcConfig.mcNodeParentKey) ? this.mcConfig.mcNodeParentKey:"pid",
        chooseData:{},
        chooseNode:{data:{}},
        treeData:this.data||[],
        vueIns:this
      }
    },
    props:{
      'value':{},
      'data':{},
      //数据格式是否是数组
      'mcIsArray':{type:Boolean,default:true},
      'mcPopTree':{type:Boolean,default:false},
      'expandOnClickNode':{type:Boolean,default:false},
      //{open:true}
      //参数值 这样可以接受变量 表达式之类的，暂时20个足够使用了
      'mcConfig':{type:Object,default:null},
      'mcv1':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv2':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv3':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv4':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv5':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv6':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv7':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv8':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv9':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv10':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv11':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv12':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv13':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv14':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv15':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv16':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv17':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv18':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv19':{type:[String,Number,Date,Boolean,Array,Object],default:null},
      'mcv20':{type:[String,Number,Date,Boolean,Array,Object],default:null}
    },
    computed:{
      dataList:{
        get(){
          if(this.mcIsArray){
            var tree = McCommon.util.arrayToTree(this.treeData,this.nodeKey,this.mcNodeParentKey);
            return tree;
          }
          return this.treeData;
        },
        set(newData){
          if(this.mcIsArray){
            this.$emit("update:data",McCommon.util.treeToArray(newData,this.nodeKey,this.mcNodeParentKey));
          }else {
            this.$emit("update:data",newData);
          }
        }
      }
    },
    watch:{
      value(newValue){
        this.chooseKey(newValue);
      }
    },
    mounted () {
      this.refresh();
      this.chooseKey(this.value);
    },
    methods:{
      text(node,fieldName){
        var arr = [];
        var cnode = node;
        while (cnode.parent){
          arr.unshift(cnode.data[fieldName])
          cnode = cnode.parent;
        }
        return arr.join("->");
      },
      clickNode(data,node,self){
        if(window.iframeUi){
          //聚焦事件没了 加上来
            var mcid = $(self.$el).find(".mc-span-pane").attr("data-magical__coder__id");
            window.iframeUi.magicalApi.focus({ids:[mcid]})
        }
        var id = this.$refs['treeRef'].getCurrentKey();
        this.$emit("input",id);
        this.$emit("mc-node-click",{value:id,node:node,data:data,self:self,tree:this.$refs.treeRef})
      },
      change(data,node){
        var id = this.$refs['treeRef'].getCurrentKey();
        if(this.value===id){
          return;
        }
        this.$emit("input",id);
        this.$emit("mc-change",{value:id,node:node,data:data,tree:this.$refs.treeRef})
      },
      reload(){
        this.$nextTick(()=>{
          this.refresh();
        })
      },
      chooseKey(value){
        this.$nextTick(()=> {
          this.$refs.treeRef.setCurrentKey(value);
          var data = this.$refs.treeRef.getCurrentNode();
          this.chooseData = data||{};
          if(value!==null && typeof value !=='undefined'){
            this.chooseNode = this.$refs.treeRef.getNode(value);
          }
          if(!this.chooseNode){
            this.chooseNode =  {data:{}};
          }
          this.$emit("mc-choose",{value:value,data:data,node:this.chooseNode,tree:this.$refs.treeRef})
        })
      },
      getCurrentKey(){
        return this.$refs['treeRef'].getCurrentKey();
      },
      getCurrentNode(){
        return this.chooseNode;
      },
      refresh(){
        if(this.mcConfig&&this.mcConfig.api){
          McCommon.util.ajaxQuery(this,this.mcConfig.api,(res)=>{
            this.dealResult(res);
          });
        }
        return true;
      },
      dealResult(res){
        if(res.data){
          this.$emit("before-render-data",{res:res});
          var resData = res.data;
          this.treeData.length=0;
          if(resData){
            for(var i=0;i<resData.length;i++){
              this.treeData.push(resData[i])
            }
          }
          this.chooseKey(this.value);
        }
      },
      getTree(){
        return this.$refs.treeRef;
      },
      getData(){
        return this.dataList;
      },
      empty(){
        this.treeData=[]
      },
      getTreeData(){
        return this.treeData;
      },
      setData(data){
        this.treeData = data;
      },
      getArrayData(){
        return McCommon.util.treeToArray(this.dataList,this.nodeKey,this.mcNodeParentKey)
      }
    }
  }
</script>

<style lang="scss">
  /*不加这个 实战太丑了 超出就没法用*/
  .el-popover {
    max-height: 80%;
    overflow: auto;
  }
  .magicalcoder-dragging .mc-tree{
    padding: 4px;
    border: solid 1px green;
  }
  .magicalcoder-dragging .el-tree{
    padding: 10px;
  }
  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#409eff;color:#fff}.el-tree-node.is-current>.el-tree-node__content{background-color:#409eff!important;color:#fff}
</style>
